<!DOCTYPE html>
<html>
    <head>
        <title> Draw Picture </title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=10.0,minimum-scale=0.1,user-scalable=yes">
        <script src="{{ url_for("static",filename='js/jquery-3.4.1.js')}}"></script>
    </head>
    <body>
        <script>
            var Point = function(x_, y_) { return {x:x_, y:y_} }
            var pointList = new Array()
            var roadImg = new Image();

            $(document).ready(function(){
                var canvas = $("#drawCanvas");
                var c_h = canvas.attr("height")
                var c_w = canvas.attr("width")
                var context = canvas[0].getContext('2d');
                var abs_y = canvas.offset().top;
                var abs_x = canvas.offset().left;

                var mouseFlag = false;

                //canvas.click(function(e){
                $("#drawCanvas").click(function(e){
                    rel_x = e.clientX - abs_x;
                    rel_y = e.clientY - abs_y;
                    if (!mouseFlag) {
                        mouseFlag = true;
                        tmp_x = rel_x;
                        tmp_y = rel_y;
                        pointList.push(Point(rel_x, rel_y))
                    } else {
                        context.beginPath();
                        context.moveTo(tmp_x, tmp_y);
                        context.lineTo(rel_x, rel_y);
                        tmp_x = rel_x;
                        tmp_y = rel_y;
                        context.strokeStyle="red";
                        context.stroke();
                        pointList.push(Point(rel_x, rel_y))
                    }
                });

                $('#road_selection').change(function() {
                    var selectRoad = $('#road_selection').find("option:selected").text()
                    $("#road_function").attr("value", selectRoad)
                });

                $("#add_lane").click(function() {
                    if (pointList.length <=2) {
                        alert("Point number must larger than 2!");
                    } else {
                        pointList_json = JSON.stringify(pointList);
                        lane = $("#road_function").attr("value")
                        $.post("/post/manualDraw",
                        {pointList_json:pointList_json, lane:lane}, function(recv){
                            // TODO
                            //$('#testBin').html(recv);
                            roadImg.src = recv;
                            //alert(recv)
                        });
                        mouseFlag = false
                        pointList = new Array();
                    }
                });

                $("#refresh").click(function() {
                    $.post("/post/refreshImg",
                    {w:c_w, h:c_h}, function(recv){
                        roadImg.src = recv;
                        //context.drawImage(roadImg, 0, 0, c_w, c_h);
                        mouseFlag = false
                        pointList = new Array();
                    });
                });

                $("#draw").click(function() {
                    context.drawImage(roadImg, 0, 0, c_w, c_h);
                });

            });
        </script>
        <div>
            <!--img id="drawImg" src="/monitor_img" width="500" height="500"> </img>
            <h2> Draw Canvas </h2-->
            <canvas id="drawCanvas" width="800" height="640", style="border:1px solid #c3c3c3;"></canvas>
        </div>
        <div>
            <select id="road_selection">
                <option value="--"> -- </option>
                <option value="Turn Left"> Turn Left </option>
                <option value="Turn Right"> Turn Right </option>
                <option value="Ahead"> Ahead </option>
            </select>
            <input type="text" id="road_function" />
            <button id="add_lane"> Add Lane </button>
            <button id="refresh"> Refresh </button>
            <button id="draw"> Draw </button>
        </div>
        <div id="testBin"></div>
    </body>


</html>
